<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网络连接错误 - 无法访问</title>
    <style>
        /* --- 样式重置与基础设置 --- */
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #b7dffd; /* 浅色背景 */
            color: #333;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            text-align: center;
        }

        /* --- 核心容器 --- */
        .error-container {
            background-color: #fff; /* 浅色容器背景 */
            padding: 40px 20px;
            border-radius: 12px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
            max-width: 600px;
            width: 80%;
        }

        .error-container img {
            max-width: 90%;
            height: auto;
            object-fit: contain;
        }

        /* --- 标题 --- */
        h1 {
            color: #d9534f; /* 标题使用更深的错误色 */
            margin-top: 0;
            margin-bottom: 10px;
            font-size: 28px;
        }

        /* --- 描述文字 --- */
        p {
            color: #666;
            line-height: 1.6;
            margin-top: 0;
            margin-bottom: 0;
        }

        /* --- 按钮（可选） --- */
        .refresh-button {
            display: inline-block;
            padding: 10px 20px;
            background-color: #002aa6; /* 蓝色 */
            color: white;
            text-decoration: none;
            border-radius: 6px;
            font-weight: bold;
            transition: background-color 0.3s ease;
            margin-top: 25px;
        }

        .refresh-button:hover {
            background-color: #002aa6;
        }

        /* --- 深色模式 (Dark Mode) 样式 --- */
        @media (prefers-color-scheme: dark) {
            body{
                background-color: #050569; /* 深色背景 */
                color: #e0e0e0; /* 浅色文字 */
            }

            body.error-container {
                background-color: #2c2c2c; /* 深色容器背景 */
                box-shadow: 0 8px 20px rgba(255, 255, 255, 0.05); /* 较弱的浅色阴影 */
            }

            bodyh1 {
                color: #ff9898; /* 浅一点的错误标题色 */
            }

            bodyp {
                color: #b0b0b0; /* 较浅的描述文字色 */
            }

            /* 按钮颜色在深色模式下保持一致或略作调整，这里保持一致，因为它是前景元素 */
            body.refresh-button {
                background-color: #4a90e2; /* 稍微调整一个更柔和的蓝色，或者保持原色 #002aa6 */
            }

            body.refresh-button:hover {
                background-color: #357ABD;
            }

            /* 如果希望图标颜色在深色模式下稍微柔和一些 */
            body.error-icon {
                color: #ff8a8a;
            }
        }
    </style>
</head>
<body>

    <div class="error-container">
        <img src="./thinking.png" width="300"/>
        
        <h1>网络错误</h1>
        <p>诶？网络问题吗？让我看看喵~（歪头）</p>
        <p>要不要你试试检查一下网络设置？或者网址有没有问题？</p>

        <a href="native://webview_error_backward" class="refresh-button">
            返回上一页
        </a>
    </div>

</body>
</html>